<template>
	<view class="container">
		<view class="nav">
			<view class="left" @click="handleBack()"><image src="../../static/lArrow.png" mode=""></image></view>
			<view class="title">{{ navTitle }}</view>
			<view class="right"></view>
		</view>
		<view class="form">
			<view class="item">
				<view class="icon"><image src="../../static/images/login/name.png" mode=""></image></view>
				<view class="input"><input v-model="form.nick_name" type="text" value="" :placeholder="$t('register.nickname')" /></view>
			</view>
			<view class="item">
				<view class="icon"><image src="../../static/images/register/phone.png" mode=""></image></view>
				<view class="input"><input v-model="form.mobile" type="text" value="" :placeholder="$t('register.phone')" /></view>
				<view class="captcha" @click="getVerificationCode()">{{ invite_code }}</view>
			</view>
			<view class="item">
				<view class="icon"><image src="../../static/images/register/verycode.png" mode=""></image></view>
				<view class="input"><input v-model="form.code" type="text" value="" :placeholder="$t('register.vCode')" /></view>
			</view>
			<view class="item">
				<view class="icon"><image src="../../static/images/login/pwd.png" mode=""></image></view>
				<view class="input"><input v-model="form.login_pwd" type="password" value="" :placeholder="$t('register.pwd')" /></view>
			</view>
			<view class="item">
				<view class="icon"><image src="../../static/images/register/password.png" mode=""></image></view>
				<view class="input"><input v-model="form.cPwd" type="password" value="" :placeholder="$t('register.cPwd')" /></view>
			</view>
			<view class="item">
				<view class="icon"><image src="../../static/images/register/invitecode.png" mode=""></image></view>
				<view class="input"><input v-model="form.recommendCode" type="text" value="" :placeholder="$t('register.iCode')" /></view>
			</view>
		</view>
		<view class="register" @click="register()">{{ $t('register.signUp') }}</view>
		<view class="download" @click="download()">{{ $t('register.downLoad') }}</view>
		<view class="sigIn" @click="toSignIn()">{{ $t('register.tip') }}</view>
	</view>
</template>
<script>
import Navigate from '../../components/Navigate/index.vue';
import context from '../../main.js';
import fetch from '@/common/fetch.js';
import common from '@/mixin/common.js';
export default {
	components: {
		Navigate
	},
	mixins: [common],
	data: () => ({
		navTitle: 'Sign up',
		code: '',
		clock: 60,
		invite_code: context.$t('register.captcha'),
		invite_codeClocker: null,
		form: {
			nick_name: '',
			mobile: '',
			code: '',
			login_pwd: '',
			cPwd: '',
			recommendCode: ''
		},
		info: {
			nick_name: context.$t('register.nickname'),
			mobile: context.$t('register.phoneToast'),
			code: context.$t('register.vCodeToast'),
			login_pwd: context.$t('register.pwd'),
			cPwd: context.$t('register.cPwd'),
			recommendCode: context.$t('register.iCode')
		}
	}),
	onLoad: function(option) {
		let result = decodeURIComponent(option);
		if (result) {
			this.form.recommendCode = option.invite_code;
		}
		// if (option.invite_code) {
		// 	let invite_code = JSON.parse(decodeURIComponent(option));
		// 	this.form.recommendCode = invite_code;
		// }
	},
	methods: {
		handleBack() {
			uni.navigateBack();
		},
		getVerificationCode() {
			if (this.clock == 60) {
				if (this.form.mobile.length === 0) {
					uni.showToast({
						title: this.$t('register.phoneToast'),
						icon: 'none',
						duration: 2000
					});
				} else {
					fetch
						.request(
							'/index/index/sendMobileCode',
							{
								mobile: this.form.mobile
							},
							'POST',
							true,
							false
						)
						.then(res => {
							if (parseInt(res.code) === 0) {
								console.log(res);
								uni.showToast({
									icon: 'none',
									mask: true,
									title: res.data,
									duration: 2000
								});
								this.invite_codeClocker = setInterval(() => {
									if (this.clock <= 1) {
										this.invite_code = this.$t('register.captcha');
										this.clock = 60;
										clearInterval(this.invite_codeClocker);
									} else {
										this.clock--;
										this.invite_code = this.clock;
									}
								}, 1000);
							}
						});
				}
			}
		},
		download() {
			fetch.request('/index/mobile/kefu', null, 'GET').then(res => {
				if (res.code === '0' || res.code === 0) {
					window.location.href = res.data.config.app_url;
				} else {
					uni.showToast({
						title: res.msg, //其实是error,为了不展示给用户
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		register() {
			if (this.form.login_pwd !== this.form.cPwd) {
				uni.showToast({
					title: 'Password input is inconsistent',
					icon: 'none',
					duration: 2000
				});
			} else {
				if (this.vaild(this.form, this.info)) {
					fetch.request('/index/index/doReg', this.form, 'POST').then(res => {
						if (parseInt(res.code) === 0) {
							uni.showToast({
								title: this.$t('register.success'), //其实是error,为了不展示给用户
								icon: 'success',
								duration: 2000
							});

							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/index'
								});
							}, 2100);
						} else {
							uni.showToast({
								title: res.msg, //其实是error,为了不展示给用户
								icon: 'none',
								duration: 2000
							});
						}
					});
				}
			}
		},
		toSignIn() {
			uni.navigateTo({
				url: '/pages/login/index'
			});
		}
	}
};
</script>
<style>
.uni-navbar {
	background-image: url(../../static/images/regist/tabbar.png);
	background-size: 100% 100%;
	height: 44px;
}
</style>
<style lang="less" scoped>
.container {
	top: constant(safe-area-inset-top);
	top: env(safe-area-inset-top);
	width: 100vw;
	height: 100vh;
	.nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 60px;
		background: red linear-gradient(to right, #fa8779, #fd5d56);
		.left {
			margin: 0 20px;
			flex: 1;
			width: 40px;
			image {
				width: 13px;
				height: 16px;
			}
		}
		.title {
			flex: 6;
			text-align: center;
			font-size: 16px;
			color: #fff;
		}
		.right {
			flex: 1;
			margin: 0 20px;
			width: 40px;
		}
	}
	.form {
		padding-top: 10px;
		.item {
			height: 40px;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 0 20px;
			padding: 30px 20px;
			border-bottom: solid 1px whitesmoke;
			.icon {
				margin-right: 10px;
				image {
					width: 14px;
					height: 16px;
				}
			}
			.input {
				width: 100%;
			}
			.captcha {
				color: rgb(251, 149, 119);
				white-space: nowrap;
				font-size: 14px;
			}
		}
	}
	.register {
		background-image: url(../../static/images/register/register.png);
		background-size: 100% 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin: 20px;
		color: #fff;
		font-size: 14px;
	}
	.download {
		background-image: url(../../static/images/register/download.png);
		background-size: 100% 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin: 20px;
		color: #fff;
		font-size: 14px;
	}
	.uni-input-placeholder,
	.sigIn {
		color: lightgray;
		font-size: 14px;
	}
	.sigIn {
		text-align: center;
	}
}
</style>
